<!--
 * @FilePath     : /layui/demo/1133.html
 * @Description  : 本地多级数据 & 不同风格
 * @Date         : 2025-02-21 08:49
 * @Author       : Fang YingGui
 * @LastEditors  : fangyinggui 18715384437@163.com
 * @LastEditTime : 2025-02-21 08:57
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>documentName</title>
    <link rel="stylesheet" href="/layui/dist/css/layui.css" />
    <link rel="stylesheet" href="/layui/extends_modules/formSelects-v4/formSelects-v4.css" />
  </head>
  <body>
    <div class="layui-form">
      <select name="city" xm-select="select11">
        <option value="">（占位）请选择城市</option>
      </select>
    </div>

    <script src="/layui/dist/layui.js"></script>
    <script>
      layui
        .config({
          base: '/layui/extends_modules/', // 配置 layui 第3方扩展模块存放的基础目录
        })
        .extend({
          formSelects: '/formSelects-v4/formSelects-v4',
        })
        .use(['jquery', 'formSelects'], function () {
          var $ = layui.jquery,
            formSelects = layui.formSelects

          // 渲染本地 formSelects 数据
          layui.formSelects.data('select11', 'local', {
            arr: [
              // 一级节点 - 1
              {
                name: '北京',
                value: 1,
                children: [
                  // 二级节点
                  {
                    name: '北京1',
                    value: 12,
                    children: [
                      // 三级节点
                      {
                        name: '朝阳区',
                        value: 13,
                        children: [
                          {
                            name: '东胡同',
                            value: 131,
                          },
                          {
                            name: '南胡同',
                            value: 132,
                          },
                          {
                            name: '西胡同',
                            value: 133,
                          },
                          {
                            name: '北胡同',
                            value: 134,
                          },
                        ],
                      },
                    ],
                  },
                ],
              },
              // 一级节点 - 2
              {
                name: '合肥',
                value: 2,
                children: [
                  // 二级节点
                  {
                    name: '合肥1',
                    value: 21,
                    children: [
                      // 三级节点
                      {
                        name: '蜀山区区',
                        value: 211,
                        children: [
                          {
                            name: '兴园街道',
                            value: 2111,
                          },
                          {
                            name: '南七街道',
                            value: 2112,
                          },
                          {
                            name: '南岗街道',
                            value: 2113,
                          },
                          {
                            name: '笔架山街道',
                            value: 2114,
                          },
                        ],
                      },
                    ],
                  },
                ],
              },
            ],
            linkage: true, // 设置风格
            linkageWidth: 200,
          })

          // 设置默认值
          formSelects.value('select11', ['1/12/133', '2/21/2113'])
        })
    </script>
  </body>
</html>
